<template>
	<div class="thread-manager-info">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<span>{{ propUpType === 'add' ? $t('publicBtn.add') : propUpType === 'edit' ? $t('publicBtn.edit') :
						$t('publicBtn.detail') }}</span>
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<el-form ref="info" :model="info" :rules="rules" label-width="auto" class="demo-ruleForm">
					<div class="content_info">
						<template v-if="propUpType === 'edit'">
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.namePerson')" prop="name">
										<el-input v-model="info.name" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.phone')" prop="phone">
										<el-input :disabled="true" v-model="info.phone" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.sex')" prop="sex">
										<el-button size="medium" :type="info.sex === 1 ? 'primary' : ''" round @click.stop="getBtn(1)">{{
											$t('text.male') }}</el-button>
										<el-button size="medium" :type="info.sex === 2 ? 'primary' : ''" round @click.stop="getBtn(2)">{{
											$t('text.female') }}</el-button>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.channelStatus')" prop="projectId">
										<el-select :disabled="true" v-model="info.projectId" filterable clearable
											:placeholder="$t('placeholderTip.pSelect')" style="width:100%">
											<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.createTime')">
										<el-input readonly :value="info.createTime" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.status')">
										<el-input readonly
											:value="info.clueStatus === -1 ? $t('text.loseEffectiveness') : info.clueStatus === 0 ? $t('text.toBeDistributed') : $t('text.assigned')" />
									</el-form-item>
								</el-col>
							</el-row>
							<div class="line"></div>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.intendedVehicle')" prop="intendedId">
										<el-select v-model="info.intendedId" filterable clearable :placeholder="$t('placeholderTip.pSelect')"
											style="width:100%">
											<el-option v-for="item in interestedModelsList" :key="item.id" :label="item.name" :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.focus')">
										<el-select v-model="info.focusIds" filterable clearable multiple
											:placeholder="$t('placeholderTip.pSelect')" style="width:100%">
											<el-option v-for="item in focusList" :key="item.id" :label="item.name" :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.describe')" :prop="Number(isDescribe) === 1 ? 'remark' : ''">
										<el-input v-model="info.remark" rows="3" type="textarea" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
							</el-row>
						</template>
						<template v-else>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.namePerson')" prop="name">
										<el-input readonly :value="info.name" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.phone')" prop="phone">
										<el-input readonly :value="info.phone" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.sex')">
										<el-input readonly :value="info.sex === 1 ? $t('text.male') : $t('text.female')" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.channelStatus')" prop="projectId">
										<el-select :disabled="true" :value="info.projectId" filterable clearable placeholder=""
											style="width:100%">
											<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.createTime')">
										<el-input readonly :value="info.createTime" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.status')">
										<el-input readonly
											:value="info.clueStatus === -1 ? $t('text.loseEffectiveness') : info.clueStatus === 0 ? $t('text.toBeDistributed') : $t('text.assigned')" />
									</el-form-item>
								</el-col>
							</el-row>
							<div class="line"></div>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.intendedVehicle')">
										<el-input readonly :value="info.intendedModel" />
										<div class="descInfo" v-if="info.importCar">{{ $t('text.importCar') }}: {{ info.importCar }}</div>
									</el-form-item>
								</el-col>
								<el-col :span="8" v-if="info.clueStatus === 0">
									<el-form-item :label="$t('formLabel.focus')">
										<el-input readonly :value="info.focuses" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.describe')" prop="remark">
										<el-input readonly :value="info.remark" rows="3" type="textarea" />
									</el-form-item>
								</el-col>
							</el-row>
							<div class="line" v-if="info.clueStatus === -1"></div>
							<el-row :gutter="24" v-if="info.clueStatus === -1">
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.invalidName')">
										<el-input readonly :value="info.invalidName" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.treatTime')">
										<el-input readonly :value="info.treatTime" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24" v-if="info.clueStatus === -1">
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.invalidRemark')">
										<el-input readonly :value="info.invalidRemark" rows="3" type="textarea" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24" v-if="info.clueStatus === 1">
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.salesConsultant')">
										<el-input readonly :value="info.adviserName" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.allocateTime')">
										<el-input readonly :value="info.treatTime" />
									</el-form-item>
								</el-col>
							</el-row>
						</template>
					</div>
					<div class="footerBtn">
						<el-button @click="getCancle">{{ propUpType !== 'detail' ? $t('el.popconfirm.cancelButtonText') :
							$t('el.popconfirm.close') }}</el-button>
						<el-button v-if="propUpType !== 'detail'" type="primary" @click="addSubmitForm"
							v-loading.fullscreen.lock="fullscreenLoading">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
					</div>
				</el-form>

			</div>
		</div>
	</div>
</template>
<script>
import { getClueInfo, setClueUpdate } from '@/api/client'
import { getPresaleAttributeList } from '@/api/public'
export default {
	name: '',
	components: {},
	data() {
		return {
			navigatList: [],
			info: {},
			isDescribe: this.$store.getters.isDescribe, //DCC描述 1开启 2关闭
			rules: {
				phone: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					},
					{
						required: true,
						pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
						message: this.$t('text.phoneTip'),
						trigger: 'blur'
					}
				],
				name: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				remark: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				projectId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				]
			},
			projectList: [], //渠道状态
			interestedModelsList: [], //意向车型
			focusList: [], //关注点
			propUpType: '', // edit detail
			fullscreenLoading: false
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
	},
	watch: {},
	mounted() {
		window._vm = this
		this.propUpType = this.$route.query.propUpType
		if (this.$route.query.propUpType === 'edit') {
			this.getPresaleAttributeListData(7)
			this.getPresaleAttributeListData(5)
		}
		this.getPresaleAttributeListData(1)
		this.$nextTick(() => {
			this.getInfo(this.$route.query.id)
		}, 500)
	},
	created() { },

	activated() { },
	destroyed() { },
	methods: {
		getPresaleAttributeListData(ids) {
			getPresaleAttributeList(ids).then(res => {
				if (res.code === 200) {
					this.$nextTick(() => {
						if (ids === 5) {
							this.focusList = res.data.focusList
						} else if (ids === 1) {
							this.projectList = res.data.projectId
						} else if (ids === 7) {
							this.interestedModelsList = res.data.intendedList
						}
					})

				}
			})
		},
		// 性别
		getBtn(sex) {
			this.info.sex = sex
		},
		// 提交
		addSubmitForm() {
			this.$refs['info'].validate(valid => {
				if (valid) {
					var obj = JSON.parse(JSON.stringify(this.info))
					if (obj.focusIds && obj.focusIds.length > 0) {
						var focusesList = []
						var arr = obj.focusIds
						for (var i = 0; i < arr.length; i++) {
							for (var j = 0; j < this.focusList.length; j++) {
								var item = this.focusList[j]
								if (arr[i] === item.id) {
									focusesList.push(item.name)
								}
							}
						}
						obj.focuses = focusesList.toString()
						obj.focusIds = obj.focusIds.toString()
					}
					this.interestedModelsList.filter(item => {
						if (obj.intendedId === item.id) {
							obj.intendedModel = item.name
						}
					})
					this.fullscreenLoading = true
					var params = obj
					setClueUpdate(params)
						.then(res => {
							if (res.code === 200) {
								this.$message({
									message: this.$t('text.editSucceedTip'),
									type: 'success'
								})
								this.fullscreenLoading = false
								this.getCancle()
							}
						})
						.catch(err => {
							this.fullscreenLoading = false
							console.log(err, 'err')
						})
				} else {
					return false
				}
			})
		},
		// 详情
		getInfo(id) {
			const loading = this.$loading({
				lock: true,
				text: this.$t('text.loading'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			getClueInfo(id).then(res => {
				if (res.code === 200) {
					var obj = res.data
					if (res.data.focusIds) {
						obj.focusIds = res.data.focusIds.split(',').map(Number)
					}
					// 判断 如果意向车型id  匹配不上，是原来id 为空
					var data = this.interestedModelsList.find(
						n => n.id === obj.intendedId
					)
					if (!data) {
						obj.intendedId = ''
					}
					this.info = obj
					loading.close()
				}
			}).catch(() => {
				loading.close()
			})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.thread-manager-info {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;
			overflow: hidden;

			&>.el-form {
				width: 100%;
				height: 100%;

				&>.content_info {
					width: 100%;
					height: calc(100% - 40px);
					overflow: hidden;
					overflow-y: auto;
				}

				.footerBtn {
					width: 100%;
					display: flex;
					justify-content: center;
				}
			}

			.line {
				height: 1px;
				margin-bottom: 25px;
				background: #ebeef5;
			}

			.descInfo {
				line-height: 22px;
				padding: 10px;
				font-size: 12px;
				background: #f3f3f3;
				border-radius: 8px;
				margin-top: 10px;
			}

			.cardBox {
				width: 104px;
				height: auto;
				float: left;
				position: relative;

				&>.name {
					text-align: center;
					color: #999;
					font-size: 12px;
				}
			}

			.avatar-uploader {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				width: 104px;
				height: 104px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
				float: left;
			}

			.tipInfo {
				height: 104px;
				display: flex;
				align-items: flex-end;
				color: #999999;
				font-size: 14px;
				margin-left: 13px;
			}

			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409eff;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 104px;
				height: 104px;
				line-height: 104px;
				text-align: center;
			}

			.avatar {
				width: 104px;
				height: 104px;
				display: block;
			}

			.el-avatar {
				img {
					width: 100%;
					height: 100%;
				}
			}

			.deleteImg {
				position: absolute;
				top: -10px;
				left: 92px;
				cursor: pointer;

				&>img {
					width: 20px;
					height: 20px;
				}

				&>.el-icon-error {
					font-size: 18px;
					color: #dfb771;
					overflow: hidden;
				}
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}
		}
	}
}
</style>
